<template>
<div class="vip">
  <div class="vip-wrap" v-show="isVip">
    <div class="hd">
      <!-- <van-notice-bar text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。" left-icon="/static/images/vip/ad.png" /> -->
      <div class="avatar">
        <img :src="userImg" alt="" class="user-icon">
        <span class="user-name">罗少奇</span>
      </div>
      <div class="btn" @click="$router.push({path:'/applyProcess'})">
        应聘渠道
      </div>
    </div>
    <div class="bd">
      <div class="my-income">
        <h5 class="title">--- 我的收入 ---</h5>
        <div class="tabs">
          <router-link class="tab-item" :to="{path: '/incomeDetail'}">
            <b class="b1">200.00</b>
            <span class="tl">今日预估收入</span>
          </router-link>
          <router-link class="tab-item" :to="{path: '/incomeDetail'}">
            <b class="b1">138.00</b>
            <span class="tl">本月预估收入</span>
          </router-link>
          <router-link class="tab-item" :to="{path: '/incomeDetail'}">
            <b class="b1">215.00</b>
            <span class="tl">累计预估收入</span>
          </router-link>
          <router-link class="tab-item" :to="{path: '/incomeDetail'}">
            <b class="b1">1236.00</b>
            <span class="tl">可提现金额</span>
          </router-link>
        </div>
      </div>
      <div class="my-income">
        <h5 class="title">--- VIP龙虎榜 ---</h5>
        <div class="tabs">
          <router-link class="tab-item" :to="{path: '/incomeDetail'}">
            <b class="b1">99+</b>
            <span class="tl">今日地区排名</span>
          </router-link>
          <router-link class="tab-item" :to="{path: '/incomeDetail'}">
            <b class="b1">99+</b>
            <span class="tl">今日全国排名</span>
          </router-link>
          <router-link class="tab-item" :to="{path: '/incomeDetail'}">
            <b class="b1">99+</b>
            <span class="tl">本月地区排名</span>
          </router-link>
          <router-link class="tab-item" :to="{path: '/incomeDetail'}">
            <b class="b1">99+</b>
            <span class="tl">本月全国排名</span>
          </router-link>
        </div>
      </div>
      <div class="my-income">
        <h5 class="title">--- 数据统计 ---</h5>
        <div class="tabs">
          <router-link class="tab-item" :to="{path: '/incomeDetail'}">
            <b class="b1">
              <van-icon name="password-view" />
            </b>
            <span class="tl">浏览用户</span>
          </router-link>
          <router-link class="tab-item" :to="{path: '/incomeDetail'}">
            <b class="b1">
              <van-icon name="pending-orders" />
            </b>
            <span class="tl">推广订单</span>
          </router-link>
          <router-link class="tab-item" :to="{path: '/incomeDetail'}">
            <b class="b1">
              <van-icon name="gold-coin" />
            </b>
            <span class="tl">销售详情</span>
          </router-link>
          <router-link class="tab-item" :to="{path: '/incomeDetail'}">
            <b class="b1">
              <van-icon name="contact" />
            </b>
            <span class="tl">买家管理</span>
          </router-link>
        </div>
      </div>
    </div>
  </div>
  <div class="vip-novip" v-show="!isVip">
    <div class="hd"></div>
    <div class="bd">
      <p>1.推广赚钱。分享商品成交后可以赚取佣金，动动手指，轻松赚钱。</p>
      <p>2.自买省钱。自买商品可以返还佣金，买的多省的多。</p>
      <p>3.优秀vip导购可以与公司直接签约，并享受五险一金待遇!</p>
    </div>
    <div class="ft">
      <van-button size="large">升级VIP>>></van-button>
      <span class="login" @click="login">已有VIP账户登录</span>
    </div>
  </div>
</div>
</template>
<script>
export default {
  data() {
    return {
      isVip: true,
      userImg: '/static/images/user.jpg'
    }
  },
  methods: {
    login() {
      this.$router.push({
        path: '/login'
      })
    }
  }
}
</script>
<style lang="scss">
@import '../../assets/styles/common.scss';
.vip {
    &-wrap {
        .hd {
            display: flex;
            flex-direction: column;
            background: url("/static/images/vip/vip-hd.png");
            background-color: #fff;
            background-repeat: no-repeat;
            background-size: cover;
            width: 100%;
            height: px2rem(360px);
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
            align-content: center;
            .user-icon {
                // position: relative;
                // top: 50%;

                width: px2rem(100px);
                height: px2rem(100px);
                border-radius: px2rem(100px);
                margin: auto;
            }
            .user-name {
                display: block;
                text-align: center;
                color: #fff;
                height: px2rem(40px);
                line-height: px2rem(40px);
            }
            .btn {
                width: px2rem(120px);
                height: px2rem(60px);
                background-color: #f44;
                line-height: px2rem(60px);
                text-align: center;
                color: #fff;
                border-radius: px2rem(8px);
            }
        }
        .van-notice-bar {
            position: relative;
            top: 0;
            padding: 0;
            width: 100%;
        }
        .bd {
            margin-top: px2rem(10px);
            background-color: #fff;
            width: 100%;
            // height: px2rem(200px);
            > .my-income {
                border-bottom: px2rem(10px) solid #f2f2f2;
                .title {
                    width: 100%;
                    height: px2rem(80px);
                    text-align: center;
                    line-height: px2rem(80px);
                    @include font-dpr(16px);
                    color: #999127;
                }
                .tabs {
                    width: 100%;
                    height: 62px;
                    display: flex;
                }
                .tab-item {
                    flex-direction: column;
                    width: 25%;
                    height: 40px;
                    padding: px2rem(10px);
                    // border: 1px solid #28d1c6;
                    text-align: center;
                    > .b1 {
                        display: block;
                        @include font-dpr(16px);
                        font-weight: bolder;
                    }
                    > .tl {
                        display: block;
                        margin-top: px2rem(20px);
                    }
                }

            }
        }
    }
    &-novip {
        .hd {
            background: url("/static/images/vip/bg-1.png");
            background-repeat: no-repeat;
            background-size: contain;
            width: 100%;
            height: px2rem(360px);
        }
        .bd {
            padding: px2rem(25px);
            @include font-dpr(14px);
            line-height: px2rem(40px);
        }
        .ft {
            width: 60%;
            margin: px2rem(30px) auto;
            > button {
                height: px2rem(80px);
                line-height: px2rem(80px);
                color: rgba(#9f9a23, 0.68);
                background-color: #131414;
            }
            .login {
                width: 100%;
                display: block;
                margin: px2rem(40px) auto;
                text-align: center;
                @include font-dpr(18px);
                color: #da2222;
            }
        }
    }
}
a:active,
a:hover,
a:link,
a:visited {
    color: black;
}
</style>
